<!-- 紧急插播 -->
<template>
  <bs-dialog
    :title="$t('紧急插播')"
    :visible="visible"
    size="default"
    @update:visible="updateVisible"
    @opened="doList"
    :closeOnClickModal="true"
  >
    <template slot="main">
        <list
          ref="list"
          class="center"
          height="448px"
          :table-tag="tableName"
          :init-headmune-flag="initHeadmuneFlag"
          :list-data="tableData"
          :has-select="false"
          :list-cols="colData"
          :init-cols-props.sync="initColsProps"
          :action-opts="actionOpts"
          @init-table="initTable"
          >
            <template slot="contentSlot" slot-scope="{row}">
              {{ row.content }}
            </template>
            <template slot="playSpeedSlot" slot-scope="{row}">
              {{ row.playSpeed | playSpeedFilter }}
            </template>
            <template slot="playTypeSlot" slot-scope="{row}">
              {{ row.playValue }}{{ row.playType === 1 ? '秒': '次' }}
            </template>
            <template slot="auditStateSlot" slot-scope="{row}">
              {{ row.auditState | auditStateFilter }}
            </template>
            <template slot="actionSlot" slot-scope="{row}">
                <template v-if="row.auditProcess === 3 || row.auditProcess < 0">
                </template>
                <template v-else>
                  <bs-agree-button-icon @click.native="agreeClick(row, 1)" v-if="isAudit"></bs-agree-button-icon>
                  <bs-un-agree-button-icon class="unAgree" @click.native="agreeClick(row, -1)" v-if="isAudit"></bs-un-agree-button-icon>
                </template>
            </template>
          </list>
          <pagination slot="footer" :total="page.total" :page="page.current" :limit="page.size" :page-sizes="page.sizes" @pagination="doList"></pagination>
    </template>
    <template slot="footer">
      <!-- <bs-confirm-button-icon @click.native="doCloseEdit"></bs-confirm-button-icon> -->
      <bs-cancel-button-icon :show-icon="false" @click.native="doCloseEdit"></bs-cancel-button-icon>
    </template>
  </bs-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import List from '@/components/List'
import MediaApi from '@/api/media'
import Pagination from '@/components/Pagination'

export default {
  name: 'InsertNoticeDialog',
  components: {
    List,
    Pagination
  },
  data() {
    return {
      queryData: {},
      tableData: [],
      page: {
        page: 1,
        total: 0,
        limit: 15
      },
      colData: [
        { label: '插播文字', prop: 'content', width: 150, slot: true },
        { label: '播放速度', prop: 'playSpeed', minwidth: 50, slot: true },
        { label: '播放单位', prop: 'playType', minwidth: 50, slot: true },
        { label: '审核状态', prop: 'auditState',minwidth: 50, slot: true },
        // { label: '审核流程', prop: 'auditProcess',minwidth: 50, slot: true },
        { label: '创建时间', prop: 'createdAt', minwidth: 90 },
      ],
      initColsProps: ['content', 'playSpeed', 'playType', 'auditState', 'auditProcess', 'createdAt'],
      actionOpts: {
        show: true,
        align: 'center',
        width: '100px',
        hidEditBtn: true,
        hidDelBtn: true,
        name:'操作',
        slot: true
      },
      tableName:'deviceWarnListTable',
      initHeadmuneFlag: false
    }
  },
  computed: {
    isAudit() {
      if(
        this.$checkOperationPermission('MEDIA_AUDIT_ONE') ||
        this.$checkOperationPermission('MEDIA_AUDIT_TWO') ||
        this.$checkOperationPermission('MEDIA_AUDIT_THREE')
      ) {
        return true
      }
      return false
    }
  },
  props: {
    visible: {
        type: Boolean,
        default: false
    },
    editorForm: {
        type: Object,
        default: () => {}
    }
  },
  filters: {
    auditStateFilter(val) {
      let msg = ''
      if(val === 0 || val === 1 || val === 2) {
        msg = '待审核'
      } else if(val === 3) {
        msg = '已通过'
      } else {
        msg = '未通过'
      }
      return msg
    },
    playSpeedFilter(val) {
      let msg = ''
      if(val === 0) {
        msg = '低速'
      } else if(val === 1) {
        msg = '中速'
      } else if(val === 2) {
        msg = '高速'
      }
      return msg
    }
    // contentFilter(val) {
    //   if(val.length > 10) {
    //     return val.substring(0, 10) + '...'
    //   }
    //   return val
    // }
  },
  methods: {
    initTable(config){
      this.initHeadmuneFlag = true //更改值  触发表头数据重绘
    },
    updateVisible(v) {
      this.$emit('update:visible', v)
    },
    doCloseEdit() {
        this.updateVisible(false)
    },
    // 查询列表
    async doList(current) {
      if(current) {
        this.page = {
          ...current
        }
      }
      var queryData = {}
			queryData.current = this.page.page
      queryData.size = this.page.limit
      const res = await MediaApi.mediaUrgent(queryData)
      if (res) {
        this.tableData = res.records? res.records: []
        this.page.total = Number(res.total? res.total: 0)
      }
    },
    async agreeClick(row, state) {
      const one = this.$checkOperationPermission('MEDIA_AUDIT_ONE')
      const two = this.$checkOperationPermission('MEDIA_AUDIT_TWO')
      const three = this.$checkOperationPermission('MEDIA_AUDIT_THREE')
      console.log(one, two, three, row.auditProcess)
      if(!one && !two && !three) {
        console.log('一审,二审,三审都没有权限')
        this.$message.error('无权操作')
        return
      }
      let msg = '通过'
      if(state === -1) {
        msg = '不通过'
      }
      const bool = await this.$confirm('提示', '是否确认'+msg+'审核？')
      if(bool) {
        let _form = {
          id: row.id,
          auditState: state
        }
        const res = await MediaApi.mediaAuditUrgent(_form)
        if(res) {
          this.$message.success('审核成功')
          this.doList()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
    width: 1000px;
}
::v-deep .el-dialog__body {
    margin-top: 3px;
}
.unAgree {
  background-color:#f56c6c!important;
  border-color: #f56c6c!important;
}
</style>
